<script lang="ts">
export default {
  name: 'CustomHeader'
}
</script>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface topTitleProps {
  title?: string
  leftIcon?: string
  leftText?: string
  rightText?: string
  color?: string
  leftArrow?: boolean
}

// 携带默认值的props
withDefaults(defineProps<topTitleProps>(), {
  title: '',
  leftIcon: 'arrow-left',
  leftText: '',
  rightText: '',
  color: '#fff',
  leftArrow: true
})

const emit = defineEmits(['clickLeft', 'clickRight'])

const router = useRouter()

const clickLeft = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}
const onClickRight = () => {
  emit('clickRight')
}
</script>

<template>
  <van-sticky>
    <van-nav-bar
      v-bind="$attrs"
      :title="title"
      @click-left="clickLeft"
      @click-right="onClickRight"
      :left-arrow="leftArrow"
    >
      <template #left v-if="leftArrow">
        <van-icon :color="color" size="20" :name="leftIcon" /><span
          :style="color"
          >{{ leftText }}</span
        >
      </template>
      <template #right>
        <span @click-right="onClickRight" :style="color">{{ rightText }}</span>
      </template>
    </van-nav-bar>
  </van-sticky>
</template>

<style lang="scss" scoped></style>
